<template>
  <div class="rightMid2">
    <!-- 定义的容器 -->
<!--    标题-->
    <p style="font-size: 0.235rem;font-weight: bolder;color: #CCFFFF;">Bug处理天数</p>
    <el-row class="wp-list" style="font-size: 0.2rem;color: #CCFFFF;position: fixed;z-index: 99999999;margin-left: 4.2rem;">
      <el-button v-for="item in wpList" :key="item.name"
                :class="{active : active == item.name}"
                 @click="selected(item.value,item.name);">{{item.name}} </el-button>
    </el-row>
<!--    极坐标图-->
    <div style="display: flex">
      <div id="rightMid2Chart" ref="rightMid2Chart" style="width: 2.75rem;height: 2.75rem" v-show="showsoft"></div>
      <div id="rightMid2Chart1" ref="rightMid2Chart1" style="width: 2.75rem;height: 2.75rem" v-show="showhard"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "rightMid2Chart",
  mounted() {
    this.selected(this.time,this.active)
  },
  data() {
    return {
      charts: "",
      opinionData: [],
      showsoft:true,
      showhard:true,
      active:'全部',
      time:'all',
      wpList: [{
          name: '全部',
          value:'all'
        },
        {
          name: '7天',
          value:'7'
        },
        {
          name: '15天',
          value:'15'
        }],
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("rightMid2Chart"));
      // 绘制图表
      // let test = {"\u590f\u8679": [32.37436945601852, 34.992225300925924, 29.75651361111111], 
      //   "\u6731\u5b89\u8d85": [27.024042511574073, 27.024042511574073, 27.024042511574073],
      //   "\u9b4f\u65b0": [20.90551291835757, 29.762237118055555, 11.351605439814815],
      //   "\u674e\u4e0a\u798f": [17.123538912527067, 84.84063862268519, 1.2656030902777777],
      //   "\u8303\u8d77\u67f3": [15.15130307538633, 15.151303370460228, 15.151303370460228],
      //   "\u5362\u5947\u534e": [14.504210821379782, 55.95070459490741, 0.014887928240740742],
      //   "\u6797\u826f\u5f6c": [12.923449622569981, 94.94086996526647, 0.012568287037037038],
      //   "\u5468\u6d77": [12.592415352828414, 25.145860088060168, 0.038971018518518516],
      //   "\u7f57\u70b3\u5cf0": [9.741468356463397, 29.75335224416097, 2.0644264699074073],
      //   "\u5f20\u6c38\u5b8f": [7.688528764054233, 36.0123852662037, 0.00013599537037037036],
      //   "\u738b\u751f\u88d5": [6.009929723451298, 22.863522418981482, 0.0029631944444444445],
      //   "\u9a6c\u6797\u6d9b": [5.1459928604166665, 38.20341800001356, 0.0012538194444444443]}
      // 处理数据
      let test = this.opinionData
      let data = []
      let name = []
      for(var key in test) {
        name.push(key);             //属性名（key）
        data.push(test[key]);       //属性值（value）
        }
      var option = {
        // 标题
        title: {
            text: '软件',
          padding: [
            this.refontSize(10),  // 上
            0, // 右
            0,  // 下
            0, // 左
          ],
            textStyle:{
                color:"#CCFFFF",
                fontSize:this.refontSize(14),
                fontWeight:"bold"
            }
        },
        // 极坐标设置
        angleAxis: {
            type: 'category',
            data: name,
            axisLabel: {
              fontSize: this.refontSize(14),
              margin:this.refontSize(8),
            },
            axisLine:{
              lineStyle:{
                  color:'#CCFFFF'
              }
            },
         },
        // 提示
        tooltip: {
            show: true,
            formatter: function (params) {
                var id = params.dataIndex;
                return name[id] + '<br>Bug平均处理天数：' + data[id][0].toFixed(2) + '<br>Bug最大处理天数：' + data[id][1].toFixed(2) + '<br>Bug最少处理天数：' + data[id][2].toFixed(2);
            }
        },
        // 极坐标轴设置
        radiusAxis: {
            splitNumber:3,
          axisLabel:{
            fontSize:this.refontSize(12),
            formatter:'{value}天'},
            axisLine:{
            lineStyle:{
                color:'#CCFFFF'
            }
        }
        },
        // 大小与位置
        polar: {
          center: ['50%','50%'],

          radius:'60%'//半径大小
        },
        // 数据
        series: [
            {
            type: 'bar',
              // barWidth:60,
            itemStyle: {
            color: '#32c5e9'
            },
            data: data.map(function (d) {
                return d[0];
                
            }),
            coordinateSystem: 'polar',
            name: 'Bug平均处理天数',
            stack: 'Bug平均处理天数'
        }, ]
    };
      myChart.setOption(option);
    },
    SetEchart1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("rightMid2Chart1"));
      let test = this.opinionData
      let data = []
      let name = []
      for(var key in test) {
        name.push(key);             //属性名（key）
        data.push(test[key]);       //属性值（value）
      }
      var option = {
        title: {
          text: '硬件',
          padding: [
            this.refontSize(10),  // 上
            0, // 右
            0,  // 下
            0, // 左
          ],
          textStyle:{
            color:"#CCFFFF",
            fontSize:this.refontSize(14),
            fontWeight:"bold"
          }
        },
        grid: {
          // top: 100
        },
        angleAxis: {
          type: 'category',
          data: name,
          axisLabel: {
            fontSize: this.refontSize(14),
            margin:8,
          },
          axisLine:{
            lineStyle:{
              color:'#CCFFFF'
            }
          },
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            var id = params.dataIndex;
            return name[id] + '<br>Bug平均处理天数：' + data[id][0].toFixed(2) + '<br>Bug最大处理天数：' + data[id][1].toFixed(2) + '<br>Bug最少处理天数：' + data[id][2].toFixed(2);
          }
        },
        radiusAxis: {
          splitNumber:3,
          axisLabel:{
            fontSize:this.refontSize(12),
            formatter:'{value}天'},
          axisLine:{
            lineStyle:{
              color:'#CCFFFF'
            }
          }
        },
        polar: {
          center: ['50%','50%'],

          radius:'60%'//半径大小
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: '#32c5e9'
            },
            data: data.map(function (d) {
              return d[0];

            }),
            coordinateSystem: 'polar',
            name: 'Bug平均处理天数',
            stack: 'Bug平均处理天数'
          }, ]
      };
      myChart.setOption(option);
    },
    // 请求软件bug解决时间
    getsoftbug(){
        this.$http({ method: 'get',
                    url: 'show/softbugsolvetime/?system='+this.$route.query.project+'&time='+this.time,}).then(response => {
                    // console.log(response.data);
                    this.opinionData =response.data;
                    // if (JSON.stringify(response.data) != "{}"){
                    this.SetEchart()
                    // }
                    // else{
                    //   this.$refs.rightMid2Chart1.style.width = '3.5rem'
                    //   this.$refs.rightMid2Chart1.style.height = '3.3rem'
                    //   // this.showsoft = !this.showsoft
                    // }
                },
                );
    },
    // 请求硬件bug解决时间
    gethardbug(){
      this.$http({ method: 'get',
        url: 'show/hardbugsolvetime/?system='+this.$route.query.project+'&time='+this.time,}).then(response => {
            // console.log(response.data);
            this.opinionData =response.data;
            // if (JSON.stringify(response.data) != "{}"){
            this.SetEchart1()
            //     }
            // else{
            //     this.$refs.rightMid2Chart.style.width = '3.5rem'
            //     this.$refs.rightMid2Chart.style.height = '3.3rem'
            //     // this.showhard = !this.showhard
            //     }
          },
      );
    },
    selected(value,name){
      this.time = value;
      this.active = name
      this.getsoftbug()
      this.gethardbug()
    }
  }
};
</script>

<style scoped>
.active {
    color: #257dff;
  }
</style>